First I gathered some information about the festival and what kind of artists perform there. I have not attended much live music and needed to get an idea for what kind of vibe was at these events.

Below are my User Journey Maps showcasing problems with the existing website or other things that could be improved upon.

For the first journey map I went over getting a shuttle. This is a service that can be purchased on the festival site, and the main problem I found with it was that it was difficult to locate and tucked away in the add-on page after you've already selected a ticket. This could cause some people who would've been interested but need group transport to reconsider the festival altogether. This was one of the problems that would get fixed by simply adding a shop page as the previous website did not have one.

For the second journey map I went through Purchasing a table. A table is a designated area for a group of people at a festival, almost like a group ticket. The main problem I ran into here was that tables are the alternative option to buying a normal ticket however it was not listed anywhere near the other ticket options, instead being on its own 'Tables' page. I removed the Tables page, replacing it with a general shop page, and added tables to this shop section. Then on the tickets page I added a comparison table that can help compare the difference in benefits and price between the table and ticket options.

For the final journey map I went through the ticket buying process. This is the most essential process on the festival website and needs to function well. The main problems with the original ticket buying process was the lack of a good way to see what options you have for additional benefits you can purchase such as merchandise or the shuttle service, and instead had to add that to your ticket at the end of the buying process on a different website. I wanted to make it clear what the tickets each included and split those additional benefits to be on the shop page and bought separately. I used the ticket comparison table on the tickets page and added more to the shop page.

Finally, here are some of the potential pain points and brainstorm solutions I drew from these User Journey Maps. I then decided which ones would be worth following through with and which ones might not be great in practice.

Wireframes Following original websites design, with some improvements designated by my User Journey Maps:

Some changes made here consist of the Ticket Price Comparison Table on the tickets page, the new split display on the lineup page, a new layout for the FAQ page, and the addition of a shop page that did not exist prior.

There are definitely still improvements to be made at this point for the user experience, which I will run into as I get further along designing the website.

The original websites look was primarily a strong magenta color that wasn't bad but was a bit overpowering and difficult to read text over. I wanted to move away from the abundance of a solid color and use more gradients, textures, and variety without making it clash too much. I went through a lot of trial and error trying to find a set of colors or gradients that would not clash with each other and also be visually interesting. Below is a set of partially designed wireframes to showcase this step in the process.

There were many problems here with overall unity and things not coming together. I decided to rework my style-tile and go for more of a space themed look, because its an event based near Area 51 with extraterrestrial-themed performances.

I got rid of the full page gradients, instead breaking it off into sections and adding some interesting space sections in the middle of pages. 

Below are some examples of moving components used in this redesign.

One that I thought added a lot in particular was the scrolling gallery images. Originally the website had a gallery page which was just rows of photos, but I decided to scrap the gallery page and instead incorporate the photos throughout other pages with this method. 

For my loading animation I chose something that would be pretty fun and vibrant but also easy to make. It also transitions into the home screen fairly well.

On the home page itself, I wanted something to grab attention but not as overpowering as the original website's flashing video. I went with a simple UFO that flies in the background of the home page. I made this by using 6 frames of smart animation and making the UFO fly to different areas of the bounding box with different animation styles and speeds.

Proffesor: Claudia Dubé

Branding: PHX LIGHTS: Supernova, sponsored by Relentless Beats

Photos taken from PHX LIGHTS Instagram
Artist Photos from their respective social media accounts
Laptop mockup from FREEPIK

Festival T-Shirt mockup from Custom Ink